<template>

    <div>
  
      <data-table
        ref="pagingTable"
        :options="options"
        :list-query="listQuery"
        @multi-actions="handleMultiAction"
      >
        <template slot="data-columns">
  
          <el-table-column
            label="角色ID"
            prop="id"
          />
  
          <el-table-column
            label="角色名称"
            prop="roleName"
          />
  
        </template>
  
      </data-table>
    </div>
  
  </template>
  
  <script>
  import DataTable from '@/components/DataTable'
  
  export default {
    name: 'SysRoleList',
    components: { DataTable },
    filters: {
  
      // 订单状态
      userState(value) {
        const map = {
          '0': '正常',
          '1': '禁用'
        }
        return map[value]
      }
    },
    data() {
      return {
  
        listQuery: {
          current: 1,
          size: 10,
          params: {
          }
        },
  
        options: {
          // 列表请求URL
          listUrl: '/exam/api/sys/role/paging',
          // 启用禁用
          stateUrl: '/sys/user/state'
        }
      }
    },
  
    methods: {
  
      // 批量操作监听
      handleMultiAction(obj) {
        if (obj.opt === 'cancel') {
          this.handleCancelOrder(obj.ids)
        }
      }
    }
  }
  </script>
  